<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f0f0f0;
        }

        p {
            font-weight: 300;
        }

        a, a:hover {
            text-decoration: none !important;
            color: #626976;
        }

        .content {
            padding: 3rem 0;
        }

        .container {
            color: #626976;
            position: relative;
        }

        h2 {
            font-size: 20px;
        }

        .custom-table {
            min-width: 900px;
        }

        .custom-table thead tr, .custom-table thead th {
            padding-bottom: 30px;
            color: #000;
        }

        .custom-table tbody th, .custom-table tbody td {
            color: #777;
            font-weight: 400;
            padding-bottom: 20px;
            padding-top: 20px;
            font-weight: 300;
            border: none;
        }

        .yellow {
            color: rgb(255, 162, 0);
        }

        .blue {
            color: rgb(75, 107, 251);
        }

        .purple {
            color: rgb(242, 40, 242);
        }
    </style>
    <title>Gacha Records</title>
    <!-- This file could be generated automatically using `java -jar grasscutter.jar -gachamap` -->
    <!-- You can also modify the file manually to customize it -->
    <!-- Otherwise you may onle see number IDs in the gacha record -->
    <script src="/gacha/mappings" type="text/javascript"></script>
    <script>
        records = '{{REPLACE_RECORDS}}'
        maxPage = '{{REPLACE_MAXPAGE}}'

        mappings['default'] = mappings['en-us']; // make en-us as default/fallback option
    </script>
</head>
<body>
<div class="content">
    <div class="container">
        <h2 class="mb-5">{{TITLE}}</h2>
        <table class="table table-striped custom-table" id="container">
            <thead>
            <tr>
                <th scope="col">{{DATE}}</th>
                <th scope="col">{{ITEM}}</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <div class="navbar">
            <a href="" id="prev">&lt;&lt;&lt;</a>
            <span id="curpage">1</span>
            <a href="" id="next">&gt;&gt;&gt;</a>
        </div>
    </div>
</div>
<footer>
    <div class="copyright">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                            <span>
                                Template by BecodReyes. All rights reserved.
                            </span>
                </div>
                <div class="col-md-6">
                    <ul style="float:right">
                        <li class="list-inline-item">
                            <a href="https://github.com/Grasscutters/Grasscutter">Github</a>
                        </li>
                        <li class="list-inline-item">·</li>
                        <li class="list-inline-item">
                            <a href="https://github.com/Grasscutters/Grasscutter/blob/stable/LICENSE">License</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</footer>

<script>
    var lang = "{{LANGUAGE}}".toLowerCase();

    function itemMapper(itemID) {
        if (mappings[lang] != null && mappings[lang][itemID] != null) {
            var entry = mappings[lang][itemID];
            if (entry) {
                return "<span class='" + entry[1] + "'>" + entry[0] + "</span>";
            }
        } else {
            if (mappings['default'][itemID] != null) {
                var entry = mappings['default'][itemID];
                if (entry) {
                    return "<span class='" + entry[1] + "'>" + entry[0] + "</span>";
                }
            }
        }
        return "<span class='blue'>" + itemID + "</span>";
    }

    (function () {
        var container = document.getElementById("container");
        records.forEach(element => {
            var e = document.createElement("tr");

            e.innerHTML = "<td>" + (new Date(element.time).toLocaleString(lang)) + "</td><td>" + itemMapper(element.item) + "</td>";
            container.appendChild(e);
        });

        // setup pagenation buttons
        var page = parseInt(new window.URLSearchParams(window.location.search).get("p"));
        if (!page) {
            page = 0;
        }
        document.getElementById("curpage").innerText = page + 1;
        var href = new URL(window.location);
        href.searchParams.set("p", page - 1);
        document.getElementById("prev").href = href.toString();
        href.searchParams.set("p", page + 1);
        document.getElementById("next").href = href.toString();
        if (page <= 0) {
            document.getElementById("prev").style.display = "none";
        }
        if (page >= maxPage - 1) {
            document.getElementById("next").style.display = "none";
        }

        // setup gacha type info
        var gachaType = new window.URLSearchParams(window.location.search).get("gachaType");
        if (mappings[lang] != null && mappings[lang][gachaType] != null) {
            var gachaString = mappings[lang][gachaType];
        } else {
            var gachaString = mappings['default'][gachaType];
            if (gachaString == null) {
                gachaString = gachaType;
            }
        }
        document.getElementById("gacha-type").innerText = gachaString;
    })();
</script>

</body>
</html>
